Skip to content

Conversation

ronjalh
Copy link
Member

@ronjalh ronjalh commented Oct 16, 2026

Summary

Expose the existing design tokens as Tailwind utilities and connect the UI fonts.

What's in it

  • Map the existing colors, spacing, typography, radius, and shadow tokens into the Tailwind v4 theme.
  • Load Faustina and Inter and connect the font theme tokens.
  • Use the existing navy token for global headings.
  • Document the AI-assisted changes in docs/AI_USAGE.md.

Choices

Reference the existing CSS variables instead of introducing duplicate palette values. This is the theme foundation required by #48.

Testing

  • git diff --check passed.
  • npm run build was skipped and remains to be run before this PR is marked ready.

Not done (still open)

Closes #60

Generated with GitHub Copilot

@ronjalh ronjalh self-assigned this Oct 16, 2026
@ronjalh ronjalh marked this pull request as ready for review October 16, 2026 11:57
@ronjalh ronjalh requested a review from a team as a code owner October 16, 2026 11:57
--color-accent-color: var(--accent-color);
--color-background-color: var(--background-color);
--color-background-color-element: var(--background-color-element);
--color-text-color: var(--text-color);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the variable --text-color is not defined anywhere in root. consider changing this to --text or --text-h

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isn't --text-color is defined in src/styles/variables.css?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, ok I thought this was meant to override variables.css, then its ok :)

@anettkva
Copy link
Member

A few things need fixing before merging:

  1. Dark mode headings: --text-color has no dark value, so headings stay dark blue on the dark background.
  2. --background-color is set twice in variables.css. The D-value green overrides the page background, so bg-background-color is green. Rename the D-value one, for example to --badge-d-value-bg.
  3. Dark mode tokens: the dark block in variables.css doesn't work if data-theme="dark" is set on <html>. Put it on <body> and write that in the README.
  4. README: "System fonts only" is outdated now that we load Faustina and Inter.

Written by Claude Code

- Give --text-color a dark value so headings are readable in dark mode.
- Rename the D-value --background-color to --badge-d-value-bg (it overrode
  the page background) and add --badge-d-value-text for light mode.
- Move the dark token block out of :root so data-theme="dark" works on
  <html>, as in src/index.css.
- README: fonts are Faustina and Inter now, not system fonts.
@xeniag xeniag merged commit cf7e89a into dev Oct 18, 2026
@anettkva anettkva deleted the 60-expose-design-tokens branch October 21, 2026 10:22
Sign in to join this conversation on GitHub.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants